<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订阅</title>
    <link rel="icon" href="http://giga-force.com/new/assets/img/logo_jf.png" color="green">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
    <script type="text/javascript" th:src="@{layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{jquery3.5.1/jquery-3.5.1.min.js}"></script>

</head>
<body onload="timer()"
      style="width: 100%;height:1200px;color:grey;background:url('image/subscribe_bg.jpg') no-repeat;background-size: 100% 100%;border: 1px solid black">
<!--background-color: #8D8D8D-->
<!--background: url('image/bg.jpg') no-repeat top center;-->
<div style="height:120px;width: 100%;float: left;">  <!--border: 1px solid black;-->
    <div style="width: 43%;padding-top: 30px;padding-left: 6%;height:100%;float: left;">  <!--border: 1px solid red-->
        <img src="image/logo_giga.png" alt="######" width="12%">
    </div>
    <div style="width:43%;color:black;padding-top:30px;padding-right: 6%;font-size: 22px;height: 100%;text-align: right;float: left;">
        <span>尊敬的客户，您好，欢迎订阅</span>+
        <div id="time"></div>
    </div>
</div>
<div class="layui-container" style="height: 100%;padding-top:242px;">   <!--border: 1px solid black-->
    <div class="layui-row" style="height: 600px;">  <!--border: 1px solid green-->
        <div class="layui-col-md6 layui-col-md-offset3">    <!-- style="border: 1px solid yellow"-->
            <form id="addForm" style="background: url('image/subscribe_main.png') no-repeat center">
                <div style="height: 150px;">    <!--border: 1px solid red-->
                    <img src="image/giga_logo.png" style="padding: 10px 220px;" width="119.55px" height="145px" alt="#">
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width: 320px;margin: 0 auto;">  <!--border: 1px solid black-->
                        <!--                        <label for="name"-->
                        <!--                               style="font-size: 14px; color: black">填写以下订阅表格，我们会以邮件的形式来提供最新的业界新闻<br>以及<b>季丰电子</b>的独家优惠、培训活动和解决方案资讯。</label>-->
                        <br>
                        <lable for="name" style="font-size: 22px;color: black">
                            <center><b>客户订阅平台</b></center>
                        </lable>
                        <div style="height: 8px"></div>
                        <input type="text" name="name" id="name" placeholder="请设置您的公司名/昵称" maxlength="10"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width: 320px;margin: 0 auto">
                        <label for="email"></label>
                        <input type="text" name="email" id="email" placeholder="请输入邮箱账号" maxlength="30"
                               style="size: 100px"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width: 320px;margin: 0 auto">
                        <label for="validateCode"></label>
                        <input type="text" name="validate" id="validateCode" placeholder="验证码" maxlength="4"
                               style="height:30px;width: 100px;vertical-align: middle">
                        <img src="/kaptcha" id="validImg" style="width: 100px;vertical-align: middle" alt="#"
                             onclick="this.src='/kaptcha?d='+new Date()*1">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width: 320px;margin: 0 auto;">
                        <button type="button" class="layui-btn layui-col-sm-offset3" onclick="realSubscribe()">订阅
                        </button>
                        <input type="reset" class="layui-btn layui-btn-warm" value="重置">
                    </div>
                </div>
                <div style="height: 50px">

                </div>
            </form>
        </div>
    </div>
</div>
<script>
    /*
    * 定时器
    * */
    function timer() {
        let dt = new Date();
        // console.log(dt)
        let dt2 = dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate() + "  " + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds()
        // console.log(dt2)
        $("#time").html(dt2)
    }

    setInterval(timer, 1000)

    /*
    * 昵称和邮箱为空的验证提示
    * 邮箱验证规则：
    *   1、以数字字母开头，中间可以是多个数字字母下划线或"-"，
    *   2、在1的前提下接着"@"符号，后面是数字字母，
    *   3、在2的前提下接着"."符号，后面加2-4个字母结尾。
    * */
    function realSubscribe() {
        let nameDom = $("#name");
        let emailDmo = $("#email");
        let validateCodeDom = $("#validateCode");
        if (nameDom.val() == "") {
            myAlert("请输入您的昵称")
            $("#name").focus();
        } else if (emailDmo.val() == "") {
            myAlert("请输入您的邮箱号")
            $("#email").focus();
        } else if (!(/^([a-zA-Z]|[0-9])(\w|-|\.)+@[-a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(emailDmo.val()))) {
            myAlert("请输入正确的邮箱！！！")
        } else {
            /*
             *  调用验证码校验的单参函数
             */
            validateCode(validateCodeDom.val());
        }
    }

    /**
     * 订阅：在验证码验证完毕后进行
     */
    function subscribe() {
        let data = $("#addForm").serialize();
        $.ajax({
            type: "POST",
            url: "addUser",
            data: data,
            dataType: "JSON",
            success: function (resp) {
                // console.log(resp)
                if (resp === 1) {
                    window.alert("邮箱添加成功！")
                    // location.href = "http://www.baidu.com"
                } else {
                    myAlert("邮箱已存在！！！")
                }
            },
            error: function () {
                myAlert("服务器出错了，请联系XXX");
            },
        })
    }

    /**
     * 验证码校验：校验成功后调用订阅函数
     */
    function validateCode(vc) {
        // let validImg=$("#validImg").attr('src');
        $.ajax({
            type: 'get',
            url: 'checkValidateCode',
            data: "validateCode=" + vc,
            success: function (data) {
                if (data !== 1) {
                    myAlert("验证码不正确")
                    // validImg.attr('/kaptcha?d='+new Date()*1);
                    $("#validImg").attr('src', '/kaptcha?d=' + new Date() * 1)
                } else {
                    subscribe();
                }
            },
            error: function () {
                myAlert("验证码出错了！！！")
            }
        })
    }

    function myAlert(text) {
        layui.use('layer', function () {
            let layer = layui.layer;
            // layer.open({
            //     type: 1,
            //     content: text,
            //     area: ['200px', '200px'],
            //     closeBtn: 2,
            //     shade: [0.5, 'green'],
            //     end: function () {
            //         //table.reload(ID,options,deep)表格重载(自动化渲染的重载)
            //     },
            // })
            layer.msg(text)
        })
    }

</script>
</body>
</html>